<template>
  <div class="tw-libmullist" >
  <template v-if="useLazeLoad">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      class="tw-libmullist-list" :class="{xcolumn: isColumn, xwrap: resultColumns > 0, [`x${_uid}`]:true}" v-if="useLazeLoad && datas.length>0"
      v-model="loading"
      :finished="finished"
      finished-text=""
      @load="onLoad"
    >
      <li class="tw-mullist-item"
        :class="{xhashref: item.href}"
        v-for="(item, idx) in datas"
        :key="idx"
        :style="{marginTop: resultColumns > 0 && idx + 1 > resultColumns ? itemSpacing : '0'}"
        @click="clickItem(item)">
        <div class="tw-mullist-item-head">
          <div class="tw-mullist-head-title" v-if="item.title" v-html="item.title"></div>
          <div class="tw-mullist-head-des" v-if="item.content" v-html="item.content"></div>
        </div>
        <div class="tw-mullist-item-body">
          <div v-if="item.child && item.child.length>0">
            <div class="tw-mullist-child-item" v-for="(itm, itx) in item.child" :key="itx"
             :style="{textAlign: itm.align ? itm.align : 'center', width: itm.width}">
              <div v-if="itm.title" class="tw-mullist-item-title" v-html="itm.title"></div>
              <div class="tw-mullist-item-des">
                <span v-if="itm.content" v-html="itm.content"></span>
                <span v-if="itm.html" v-html="itm.html"></span>
              </div>
            </div>
          </div>
          <div v-else>
            <div v-if="item.title" class="tw-mullist-item-title" v-html="item.title"></div>
            <div class="tw-mullist-item-des">
              <span v-if="item.content" v-html="item.content"></span>
              <span v-if="item.html" v-html="item.html"></span>
            </div>
          </div>
        </div>
      </li>
    </van-list>
    </van-pull-refresh>
  </template>
  <template v-else>
    <ul class="tw-libmullist-list" :class="{xcolumn: isColumn, xwrap: resultColumns > 0, [`x${_uid}`]:true}" v-if="datas.length>0">
      <li class="tw-mullist-item"
        :class="{xhashref: item.href}"
        v-for="(item, idx) in datas"
        :key="idx"
        :style="{marginTop: resultColumns > 0 && idx + 1 > resultColumns ? itemSpacing : '0'}"
        @click="clickItem(item)">
        <div class="tw-mullist-item-head">
          <div v-if="item.title" v-html="item.title"></div>
          <div v-if="item.content" v-html="item.content"></div>
        </div>
        <div class="tw-mullist-item-body">
          <div v-if="item.child && item.child.length>0">
            <div class="tw-mullist-child-item" v-for="(itm, itx) in item.child" :key="itx"
             :style="{textAlign: itm.align ? itm.align : 'center', width: itm.width}">
              <div v-if="itm.title" class="tw-mullist-item-title" v-html="itm.title"></div>
              <div class="tw-mullist-item-des">
                <span v-if="itm.content" v-html="itm.content"></span>
                <span v-if="itm.html" v-html="itm.html"></span>
              </div>
            </div>
          </div>
          <div v-else>
            <div v-if="item.title" class="tw-mullist-item-title" v-html="item.title"></div>
            <div class="tw-mullist-item-des">
              <span v-if="item.content" v-html="item.content"></span>
              <span v-if="item.html" v-html="item.html"></span>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <tw-lib-nodata v-show="data.length===0" />
  </template>
  </div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import border from '../tw-lib-base/border/mixins'
import nodata from '../tw-lib-base/no-data/no-data'

export default {
  name: 'icon-sort-list',

  mixins: [props, style, border, nodata],

  props,

  data () {
    return {
      datas: [],
      tmpdata: [],
      loading: false,
      finished: false,
      refreshing: false,
      pageNum: 0, // 实际接口返回页码
      pageNo: 1 // 触发接口次数计算页码
    }
  },

  computed: {
    resultColumns () {
      const columns = parseInt(this.columns)

      return columns && columns > 0 ? columns : 0
    },

    style () {
      return Object.assign({
        columns: this.columns,
        itemSpacing: this.itemSpacing,
        itemBg: this.itemBg,
        itemPadding: this.itemPadding,
        titleFontSize: this.titleFontSize,
        titleFontColor: this.titleFontColor,
        desFontSize: this.desFontSize,
        desFontColor: this.desFontColor,

        familyText: this.familyText,
        showLine: this.showLine,
        showMulText: this.showMulText,
        mulTextLine: this.mulTextLine,
        itemHeight: this.itemHeight,
        isColumnBg: this.isColumnBg,
        itemBg1: this.itemBg1,

      }, this.borderStyle)
    }
  },

  mounted () {
    // if (this.useLazeLoad) {
    this.tmpdata = this.data.list
    if (this.syncFunc !== '' && typeof this.syncFunc === 'function') {
      this.datas = this.syncFunc(this.datas, this.data.list)
    } else {
      this.datas = this.data.list
    }
    // }
  },

  watch: {
    value () {
      if (this.useLazeLoad) {
        console.log('页码复原', this.value)
        // this.pageNo = this.value ? this.value : 1
        // this.pageNum = parseInt(this.value) - 1
        if (parseInt(this.value) === 1) {
          this.datas = []
        }
        // this.datas = []
        // this.loading = false
        // this.finished = false
        // this.refreshing = false
        // this.$emit('input', this.pageNo)
        // this.$emit('change', this.pageNo)
      }
    },
    data: {
      deep: true,
      handler () {
        if (this.useLazeLoad) {

          if (this.data && this.data.list && this.data.list.length > 0) {
            if (parseInt(this.data.pageNum) === 1) {
              console.log('第一页')
              this.tmpdata = this.data.list
              if (this.syncFunc !== '' && typeof this.syncFunc === 'function') {
                this.datas = []
                this.datas = this.syncFunc(this.datas, this.data.list)
              } else {
                this.datas = this.data.list
              }
              this.pageNum = 1
              this.pageNo = 2
              this.finished = false
              this.refreshing = false
            } else if (this.pageNum === this.pageNo - 1) {
              console.log('页码', this.pageNo)

              this.tmpdata.push.apply(this.tmpdata, this.data.list)
              if (this.syncFunc !== '' && typeof this.syncFunc === 'function') {
                this.datas = this.syncFunc(this.datas, this.data.list)
              } else {
                this.datas.push.apply(this.datas, this.data.list)
              }

              this.pageNum = parseInt(this.data.pageNum)
              this.pageNo = this.pageNum + 1

              if (this.data.list.length < parseInt(this.pageSize)) {
                this.finished = true
                this.pageNo = this.pageNum
                console.log('结束', this.pageNo)
              }
            } else {
              console.log('结束111', this.pageNo)
              this.finished = true
              this.pageNo = this.pageNum
            }
            this.loading = false;

            // if (this.datas && this.datas.length >= this.data.total) {
            if (this.tmpdata && this.tmpdata.length >= this.data.total) {
              this.finished = true;
              console.log('结束222', this.pageNo)
              console.log('结束222', this.datas.length)
              console.log('结束222', this.tmpdata.length)
              console.log('结束222', this.data.total)
              this.pageNo = this.pageNum
            }
          } else {
            console.log('无数据了')
            if (parseInt(this.data.pageNum) === 1) {
              this.datas = []
            }
            this.pageNo = 1
            this.pageNum = 1
            this.loading = false
            this.finished = true
          }
        } else {
          this.tmpdata = this.data.list
          if (this.syncFunc !== '' && typeof this.syncFunc === 'function') {
            this.datas = this.syncFunc(this.datas, this.data.list)
          } else {
            this.datas = this.data.list
          }
        }
      }
    }
  },

  methods: {
    onLoad () {
      setTimeout(() => {
        if (this.refreshing) {
          this.pageNum = 0
          this.pageNo = 1
          this.tmpdata = []
          this.datas = []
          this.refreshing = false
        }

        if (this.pageNum + 1 === this.pageNo) { // 两者相等，表示数据同步准确
          console.log('触发页码', this.pageNo)
          this.$emit('input', this.pageNo)
          this.$emit('change', this.pageNo)
        } else { // 实际与计算不同，需要计算数据量
          // console.log('this.pageNum', this.pageNum)
          // console.log('this.pageNo', this.pageNo)
          // let total = Math.ceil(this.datas.length / parseInt(this.pageSize))
          // if (total === this.pageNum) {
          //   this.pageNo = this.pageNum + 1
          // } else if (total === this.pageNo) {
          //   this.pageNo = this.pageNo + 1
          // } else {
          //   this.pageNo = total + 1
          // }
        }

      }, 300);
      // setTimeout(() => {
      //   if (this.refreshing) {
      //     this.datas = [];
      //     this.refreshing = false;
      //   }

      //   this.datas.push.apply(this.datas,this.data)
      //   this.loading = false;

      //   if (this.datas.length >= 400) {
      //     this.finished = true;
      //   }
      // }, 1000);
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    clickItem (item) {
      if (item.href) {
        if (item.target === '_blank') {
          window.open(item.href, '_blank')
        } else {
          window.location.href = item.href
        }
      }
      if (this.useClick) {
        // console.log('item', item)
        this.$emit('select', item)
      }
    },

    setStyle () {
      let style = `
        ::root > .tw-mullist-item {
          padding: ${this.itemPadding};
          background: ${this.itemBg};
          font-family: ${this.familyText};
          border-radius: ${this.itemBorderRadius};
        }

        ::root > .tw-mullist-item .tw-mullist-item-title {
          font-size: ${this.titleFontSize};
          color: ${this.titleFontColor};
        }

        ::root > .tw-mullist-item .tw-mullist-item-des {
          font-size: ${this.desFontSize};
          color: ${this.desFontColor};
          font-family: ${this.familyText};
        }

        ::root .tw-mullist-item-body {
          padding: ${this.childPadding};
          background-color: ${this.childBgColor};
          border-radius: ${this.childBorderRadius};
        }

        ::root .tw-mullist-item-head {
          padding: ${this.headPadding};
        }
        ::root .tw-mullist-child-item {
          padding: ${this.childItemPadding};
        }

        ::root .tw-mullist-child-item + .tw-mullist-child-item {
          border-top: ${this.childItemBoder};
        }

        ::root > .tw-mullist-item .tw-mullist-head-title {
          font-size: ${this.titleHeadFontSize};
          color: ${this.titleHeadFontColor};
        }
        ::root > .tw-mullist-item .tw-mullist-head-des {
          font-size: ${this.desHeadFontSize};
          color: ${this.desHeadFontColor};
        }

      `

      if (this.isColumn) {
        style += `
          ::root > .tw-mullist-item + .tw-mullist-item {
            margin-top: ${this.itemSpacing}!important;
          }
        `
      } else {
        style += `
          ::root > .tw-mullist-item + .tw-mullist-item {
            margin-left: ${this.itemSpacing};
          }
        `
      }

      if (this.resultColumns > 0) {
        style += `
          ::root > .tw-mullist-item {
            width: calc((100% - ${(this.columns - 1) * parseInt(this.itemSpacing || 0)}px)/${this.columns});
          }

          ::root > .tw-mullist-item:nth-child(${this.resultColumns}n+1) {
            margin-left: 0;
          }
        `
      }

      if (this.hasBorder) {
        const border = `${this.borderSize} ${this.borderType} ${this.borderColor}`

        if (this.borderPosition.includes(0)) {
          style += `
              ::root > .tw-libmullist-list {
                border-top: ${border};
              }
            `
        }

        if (this.borderPosition.includes(1)) {
          style += `
              ::root > .tw-libmullist-list {
                border-bottom: ${border};
              }
            `
        }

        if (this.borderPosition.includes(2)) {
          style += `
            ::root > .tw-libmullist-list {
                border-left: ${border};
              }
            `
        }

        if (this.borderPosition.includes(3)) {
          style += `
            ::root > .tw-libmullist-list {
              border-right: ${border};
            }
          `
        }

        style += `
          ::root > .tw-libmullist-list {
            border-radius: ${this.borderRadius};
        }
        `
      }

      if (this.showLine) {
        style += `
          ::root > .tw-mullist-item + .tw-mullist-item {
            border-top: 1px ${this.itemBorderType} ${this.itemBorderColor};
          }
        `
      }

      if (this.showMulText) {
        if (this.mulTextLine && parseInt(this.mulTextLine) >= 1) {
          style += `
            ::root > .tw-mullist-item .tw-mullist-item-des {
              overflow: hidden;
              white-space: normal;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: ${this.mulTextLine};
            }
          `
        } else {
          style += `
            ::root > .tw-mullist-item .tw-mullist-item-des {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: normal;
            }
          `
        }
      } else {
        style += `
          ::root > .tw-mullist-item .tw-mullist-item-des {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        `
      }

      if (this.itemHeight) {
        style += `
          ::root > .tw-mullist-item {
            height: ${this.itemHeight};
          }
        `
      }

      if (this.isColumnBg) {
         style += `
          ::root > .tw-mullist-item:nth-child(even) {
            background-color: ${this.itemBg1};
          }

          ::root > .tw-mullist-item:nth-child(odd) {
            background-color: ${this.itemBg};
          }
        `
      }

      this.addStyle(style)
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
